import { Space, Form, Input } from "antd";
import { useModel } from "umi";
import { Button } from "@douyinfe/semi-ui";
import { useReactive } from "ahooks";

const AddNotice = () => {
    const { onCloseGlobalModal } = useModel("global.modal");
    const [form] = Form.useForm();

    const state = useReactive({
        submitLoading: false,
    });

    const onFinish = async (valuse) => {
        console.log(valuse);
    };

    return (
        <div style={{ padding: 20 }}>
            <Form form={form} layout="horizontal" onFinish={onFinish} labelCol={{ span: 5 }} wrapperCol={{ span: 19 }}>
                <Form.Item label="通知内容" name="ccName" validateTrigger="onBlur" rules={[{ required: true }]}>
                    <Input.TextArea rows={4} placeholder="请输入通知内容" />
                </Form.Item>

                <div style={{ marginTop: 20, textAlign: "center" }}>
                    <Space>
                        <Button loading={state.submitLoading} type="primary" htmlType="submit" style={{ width: "100%" }}>
                            提交
                        </Button>
                        <Button loading={state.submitLoading} onClick={onCloseGlobalModal}>
                            取消
                        </Button>
                    </Space>
                </div>
            </Form>
        </div>
    );
};

export default AddNotice;
